<template>
  <div>
    <div style="padding-bottom: 10px;">
      <el-button v-if="isEdit == false" @click="isEdit=true" size="mini">编辑</el-button>
      <el-button v-if="isEdit == true" @click="saveRequestExample" size="mini">保存</el-button>
      <!-- <el-select v-model="version" size="mini">
        <el-option
          v-for="item in versionSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
    </div>
    <el-input v-if="isEdit" type="textarea"
      :rows="20"
      v-model="example.text" />
    <el-table
      v-else
      :data="example.json"
      row-key="id"
      height="610"
      border
      default-expand-all
      :row-class-name="exampleRowClassName"
      :tree-props="{children: 'items'}">
      <el-table-column
        prop="name"
        label="字段"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="descript"
        label="描述">
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
  .el-table .necessary-row {
    background: rgb(255, 239, 192);
  }
</style>

<script>
  export default {
    name: 'ExampleTable',
    props: {
      example: Object
    },
    data() {
      return {
        isEdit: false,
        versionSelect: [{
          value: 'V1',
          label: 'V1'
        }, {
          value: 'V1.1',
          label: 'V1.1'
        }, {
          value: 'V2',
          label: 'V2'
        }],
        version: 'V1'
      }
    },
    mounted() {
      this.saveRequestExample()
    },
    methods:{
      saveRequestExample() {
        if(this.example.text == null || this.example.text.trim() == ''){
          this.isEdit = false
          return;
        }
        var array = new Array()
        var textArr = this.example.text.split('\n')
        for(var i = 0; i < textArr.length; i ++){
          var text = textArr[i]
          // text =
          var field = text.trim().split(' ')
          var field_len = field.length
          var json = new Object()
          json.id = i
          json.name = field[0]
          json.type = field[1]
          json.descript = field[2]
          json.necessary = field[3] == 'Y'
          json.items = new Array()
          json.hasItems = false
          json.level =  this.startOfIndex(text)
          array.push(json)
        }
        var newArray = new Array()
        for(var i = array.length - 1; i >= 0; i --){
          if(array[i].level == 0){
            newArray.push(array[i])
          }
          else{
            for(var j = i; j >= 0; j --){
              if(array[j].level + 1 == array[i].level){
                array[j].items.push(array[i]);
                array[j].hasItems = true
                break;
              }
            }
            array[j].items.reverse()
          }
        }
        this.example.json = newArray.reverse();
        this.isEdit = false
      },
      startOfIndex(text){
        if(text == null || text == '')
          return -1;
        var count = 0;
        for(var index in text){
          var _ = text[index]
          if(_ != ' '){
            return count;
          }
          count ++
        }
      },
      exampleRowClassName({row, rowIndex}){
        if(row.necessary){
          return 'necessary-row';
        }
        return '';
      }
    }
  }
</script>

<!--
p_pid String 身份证号 Y
p_name String 姓名 Y
p_info Object 详细信息 N
 p_address String 地址 N
 p_mobild String 手机号码 N
 p_age int 年龄 N
price decimal 充值金额 Y
product Array 商品信息 Y
 product_name String 商品名 Y
 product_count int 商品数量 Y
 product_date DateTime 出库日期 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
test String 测试长度字段 N
-->
